<template>
	<view class="page-wraper">
		<view :class="data.name==carName?'swiper-view-item-box-selected':'swiper-view-item-box'" @tap="tap_item(data)" v-if="data.name">
			<!-- <image class="scroll-view-item-image" :src="data.cover_url" mode="widthFix"></image> -->
			<image class="scroll-view-item-image" :src="data.cover_url" ></image>
			<view class="swiper-text-item">{{data.name}}</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "slopeItem",
		props: {
			/**
			 * 
			 * 
			 */
			data: {
				type: Object,
				default: {}
			},
			carName:{
				type: String,
				default:''
			}
		},
		data() {
			return {
				tap_item(data) {
					this.$emit('tap_item', data)
				}
			};
		}
	}
</script>

<style>
	.page-wraper {
		width: 120rpx;
		height: 170rpx;
	}

	.swiper-view-item-box {
		width: 160rpx;
		height: 170rpx;
		border-radius: 10rpx;
		margin: 0rpx 20rpx;
		/* transform: skewX(-5deg); */
		/* border-style: solid; */
		/* border-color: #697DC2; */
		/* border-width: 1rpx; */
		background: linear-gradient(to bottom right, #E4F0FD 0%, #E7EFFD 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.swiper-view-item-box-selected {
		width: 160rpx;
		height: 170rpx;
		border-radius: 10rpx;
		margin: 0rpx 20rpx;
		/* transform: skewX(-5deg); */
		/* border-style: solid; */
		/* border-color: #697DC2; */
		/* border-width: 1rpx; */
		background: #3957BF88;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.scroll-view-item-image {
		/* margin-top: 10rpx; */
		/* margin-left: 20rpx; */
		width: 120rpx;
		height: 70rpx;
		/* transform: skewX(5deg); */
	}

	.swiper-text-item {
		margin-top: 20rpx;
		/* margin-left: 20rpx; */
		/* transform: skewX(5deg); */
		
		font-size: 22rpx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: #000026;
		opacity: 1;
		
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
</style>